$(function () {

    initArtCateList()
    // 需求一：初始化文章分类列表
    let layer = layui.layer
    // 初始化文章分类列表 渲染页面发送ajox
    function initArtCateList() {

        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(({
            data: res
        }) => {
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            let arr = []
            res.data.forEach(function (ele) {
                if (ele.Id < 0) return
                arr.push(`
            <tr>
                <td>${ele.Id}</td>
                <td>${ele.name}</td>
                <td>${ele.alias}</td>
                <td>
                    <button  data-id="${ele.Id}"  class="btn-edit layui-btn layui-btn-xs">编辑</button>
                    <button  data-id="${ele.Id}"  class="del-edit layui-btn layui-btn-xs layui-btn-danger">删除</button>
                </td>
            </tr>`)
            })
            $('tbody').empty().html(arr.join())
        })
    }
    // 定义一个全局变量，接收open（）的索引值
    let indexAdd = 0
    // 需求二：点击按钮，弹出添加类别对话框
    $('#addBtn').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            title: '添加文章类别',
            area: ['500px', '260px'],
            content: `
            <form  id='addForm' class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="分类名称" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="分类别名" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class=" layui-btn" lay-submit lay-filter="formDemo">确认提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>`
        })
    })

    // 需求三：添加文章分类，动态添加元素，事件委托
    $('body').on('submit', '#addForm', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(({
            data: res
        }) => {
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            // 成功提示，初始化文章列表
            layer.msg('恭喜发财')
            initArtCateList()
            // 框架删除方法 'close'
            layer.close(indexAdd)
        })
    })

    // 需求四：修改分类弹出层
    let indexEdit = 0
    $('tbody').on('click', '.btn-edit', function () {
        // 点击修改编辑按钮做俩件事1：弹出层  2：赋值
        indexEdit = layer.open({
            type: 1,
            title: '修改文章类别',
            area: ['500px', '260px'],
            content: `
            <form id="editForm" class="layui-form" lay-filter="editForm">
                <!--隐藏域，填充id值，将来修改数据时使用-->
                <input type="hidden" name="Id">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="分类名称" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="分类别名" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                    </div>
                </div>
            </form>`

        })

        // 2:赋值（获取数据和渲染数据）
        // attr jq方法获取自定义属性
        let id = $(this).attr('data-id')
        // 发送ajax ，获取数据，渲染到页面
        // alert(id)
        axios({
            method: 'GET',
            // id动态参数（路由参数）
            // 特点：/不能省  :要去掉  id是动态变化的   
            url: '/my/article/cates/' + id
        }).then(res => {

            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 成功后渲染
            console.log(res);
            layui.form.val('editForm', res.data.data)
        })
    })

    // 需求五：修改文字分类
    $('body').on('submit', '#editForm', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(({
            data: res
        }) => {
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            // 成功提示，初始化文章列表
            layer.msg('恭喜发财,修改成功')
            initArtCateList()
            // 框架删除方法 'close'
            layer.close(indexEdit)
        })
    })

    // 需求6:删除
    $('tbody').on('click','.del-edit',function () {
        let id =$(this).attr('data-id')
        if(id==1 || id==2){
            return layer.msg('禁止删除前俩条')
        }
        // 弹出层
        layer.confirm('确认删除嘛?',{icon:3,title:'提示'},function (index) {
            axios({
                url:'/my/article/deletecate/' + id
            }).then(res=>{
                if(res.data.status!==0){
                    return layer.msg(res.data.message)
                }
                layer.msg('恭喜发财，删除成功')
                initArtCateList()
            })
            // 关闭询问框
            layer.close(index)
        })
    })
})